<template>
  <div class="content_body">
    <div style="margin: 10px 0 10px 10px;">
      <el-button-group>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="openAdd()">新增机构</el-button>
        <!-- <el-button type="primary" icon="el-icon-delete">删除机构</el-button>
        <el-button type="primary" icon="el-icon-edit">修改机构</el-button> -->
        <el-button type="primary" icon="el-icon-search" @click="load()">查询机构</el-button>
        <!-- <el-button type="primary" icon="el-icon-refresh" @click="toggleSelection()">取消选择</el-button> -->
      </el-button-group>
    </div>
    <div style="margin: 0 10px 0 10px;">
      <el-table
        ref="multipleTable"
        :data="officeList"
        tooltip-effect="dark"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange">
        <el-table-column prop="name" label="机构名称"  min-width="15%" header-align="center"></el-table-column>
        <el-table-column prop="code" label="机构编号" min-width="10%" header-align="center"></el-table-column>
        <el-table-column prop="master" label="负责人" min-width="20%" header-align="center"></el-table-column>
        <el-table-column prop="phone" label="电话" min-width="10%" header-align="center"></el-table-column>
        <el-table-column prop="email" label="邮箱" min-width="10%" align="center"> </el-table-column>
        <el-table-column label="操作" min-width="15%" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="text-right">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.pageNo"
            :page-sizes="[10, 50, 100, 500]"
            :page-size="pageInfo.pageSize"
            layout="sizes, prev, pager, next"
            :total="pageInfo.totalRecord">
          </el-pagination>
      </div>
    </div>
    <div>
      <el-dialog title="添加机构" :visible.sync="dialogAddFormVisible" :modal-append-to-body="false" width="60%">
        <el-form :model="pageInfo">
            <div class="line-right">
              <el-form-item label="上级机构" :label-width="formLabelWidth">
                <el-select v-model="pageInfo.parent_id" placeholder="请选择上级机构" style="width:100%;">
                  <el-option v-for="item in officeAllList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="line-left">
              <el-form-item label="机构名称" :label-width="formLabelWidth">
                <el-input v-model="pageInfo.name" auto-complete="off"></el-input>
              </el-form-item>
            </div>
            <div class="line-left">
              <el-form-item label="负责人" :label-width="formLabelWidth">
                <el-input v-model="pageInfo.master" auto-complete="off"></el-input>
              </el-form-item>
            </div>
            <div class="line-left">
              <el-form-item label="电话" :label-width="formLabelWidth">
                <el-input type="number" v-model="pageInfo.phone" auto-complete="off"></el-input>
              </el-form-item>
            </div>
            <div class="line-right">
              <el-form-item label="排序因子" :label-width="formLabelWidth">
                <el-input v-model="pageInfo.seq" auto-complete="off"></el-input>
              </el-form-item>
            </div>
            <div class="line-left">
              <el-form-item label="机构级别" :label-width="formLabelWidth">
                <el-select v-model="pageInfo.grade" placeholder="请选择机构级别" style="width:100%;">
                  <el-option label="一级" value="1"></el-option>
                  <el-option label="二级" value="2"></el-option>
                  <el-option label="三级" value="3"></el-option>
                  <el-option label="四级" value="4"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="line-all">
              <el-form-item label="备注信息" :label-width="formLabelWidth">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="pageInfo.bz" auto-complete="off"></el-input>
              </el-form-item>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="ok()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "office",
  data() {
    return {
      pageInfo: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      officeList: [],
      officeAllList: [],
      formLabelWidth: "70px",
      dialogAddFormVisible: false,
      url: "save"
    };
  },
  mounted: function() {
    this.load();
  },
  methods: {
    load() {
      this.ajax({
        url: this.API.office.page,
        data: this.pageInfo,
        success: resultData => {
          this.officeList = resultData.data.results;
          this.pageInfo.totalRecord = resultData.data.totalRecord;
        }
      });
      this.ajax({
        url: this.API.office.list,
        data: {},
        success: resultData => {
          this.officeAllList = resultData.data;
        }
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNo = val;
      this.load();
    },
    openAdd() {
      this.pageInfo = {
        pageNo: this.pageInfo.pageNo,
        pageSize: this.pageInfo.pageSize,
        totalRecord: this.pageInfo.totalRecord
      };
      this.url = "save";
      this.dialogAddFormVisible = true;
    },
    handleEdit(index, office) {
      Object.assign(this.pageInfo, office);
      this.url = "update";
      this.dialogAddFormVisible = true;
    },
    handleDelete(index, office) {
      this.url = "delete";
      this.$confirm("此操作将删除该机构, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          Object.assign(this.pageInfo, office);
          this.ajax({
            url: this.API.office[this.url],
            data: this.pageInfo,
            success: resultData => {
              if (resultData.status === 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.load();
              } else {
                this.$message({
                  showClose: true,
                  message: resultData.msg,
                  type: "error"
                });
              }
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    ok() {
      this.ajax({
        url: this.API.office[this.url],
        data: this.pageInfo,
        success: resultData => {
          if (resultData.status === 0) {
            this.$message({
              message: "恭喜你，记录已保存成功",
              type: "success"
            });
            this.load();
            this.dialogAddFormVisible = false;
          } else {
            this.$message({
              showClose: true,
              message: resultData.msg,
              type: "error"
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-pagination{
    margin-top: .5rem;
}
</style>

